import 'package:flutter/material.dart';
import 'dart:math';

class CheckBoxPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CheckBoxPageState();
  }
}

class CheckBoxPageState extends State<CheckBoxPage> {
  bool isChecked = false;

  bool _value = false;
  void _valueChanged(bool value) {
    for (var i = 0; i < isChecks.length; i++) {
      isChecks[i] = value;
    }
    setState(() => _value = value);
  }

  bool isCheck = false;
  List<bool> isChecks = [false, false, false, false];

  @override
  void initState() {
    super.initState();
  }

  Color _randomColor() {
    var red = Random.secure().nextInt(255);
    var greed = Random.secure().nextInt(255);
    var blue = Random.secure().nextInt(255);
    return Color.fromARGB(255, red, greed, blue);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CheckBox Example"),
      ),
      body: Container(
        child: Center(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("选择: $isChecked"),
            Checkbox(
                activeColor: _randomColor(),
                tristate: false,
                value: isChecked,
                onChanged: (bool bol) {
                  setState(() {
                    isChecked = bol;
                  });
                }),
            Divider(),
            new Center(
              child: CheckboxListTile(
                value: _value,
                selected: true, // 默认文字是否高亮
                onChanged: _valueChanged,
                dense: false, // 文字是否对齐 图标高度
                isThreeLine: false, // 文字是否三行显示
                title: Text('全部'), // 主标题
                controlAffinity: ListTileControlAffinity
                    .trailing, // 将控件放在何处相对于文本,leading 按钮显示在文字后面,platform,trailing 按钮显示在文字前面
                subtitle: Text('勾选下列全部结果'), // 标题下方显示的副标题
                secondary: Icon(Icons.archive), // 从复选框显示在磁贴另一侧的小组件
                activeColor: Colors.red, // 选中此复选框时要使用的颜色
              ),
            ),
            new Center(
              child: new CheckboxListTile(
                  value: isChecks[0],
                  title: new Text('选项1'),
                  activeColor: _value ? Colors.red : Colors.green,
                  controlAffinity: ListTileControlAffinity.platform,
                  onChanged: (bool) {
                    setState(() {
                      isChecks[0] = bool;
                    });
                  }),
            ),
            new Center(
              child: new CheckboxListTile(
                  value: isChecks[1],
                  title: new Text('选项2'),
                  activeColor: _value ? Colors.red : Colors.green,
                  controlAffinity: ListTileControlAffinity.platform,
                  onChanged: (bool) {
                    setState(() {
                      isChecks[1] = bool;
                    });
                  }),
            ),
            new Center(
              child: new CheckboxListTile(
                  value: isChecks[2],
                  title: new Text('选项3'),
                  activeColor: _value ? Colors.red : Colors.green,
                  controlAffinity: ListTileControlAffinity.platform,
                  onChanged: (bool) {
                    setState(() {
                      isChecks[2] = bool;
                    });
                  }),
            ),
            new Center(
              child: new CheckboxListTile(
                  value: isChecks[3],
                  title: new Text('选项4'),
                  activeColor: _value ? Colors.red : Colors.green,
                  controlAffinity: ListTileControlAffinity.platform,
                  onChanged: (bool) {
                    setState(() {
                      isChecks[3] = bool;
                    });
                  }),
            )
          ],
        )),
      ),
    );
  }
}
